<template>
  <div id="app">
    <counter :count="0" @countAdd="addHandle"></counter>
    <counter :count="0" @countAdd="addHandle"></counter>
    <div>{{total}}</div>
    <!-- 加上.native 可以触发原生事件 -->
    <!-- <child :content="'hhhh'"></child>
    <bustest :content="'SSSS'"></bustest>
    <bustest :content="'DDDDD'"></bustest>
    <chacao>
      <div slot='header'><p>This is header</p></div>
      <div slot="footer"><p>This is footer</p></div>
    </chacao>
    <router-link >ddd</router-link> -->
    <!-- <scopechacao :list='list'>
      <template slot-scope="attrs">
        <h1>{{attrs.item}}</h1>
      </template>
    </scopechacao> -->
    <animateTest></animateTest>
  </div>
</template>

<script>
import counter from './counter';
import child from './child';
import bustest from './bustest';
import chacao from './chacao';
import scopechacao from './scopechacao';
import animateTest from './animateTest';
export default {
  name: 'App',
  components: {
    counter,
    child,
    bustest,
    chacao,
    scopechacao,
    animateTest
  },
  data: function () {
    return {
      total: 0,
      list: [
        1, 2, 3, 4
      ]
    };
  },
  methods: {
    addHandle: function (num) {
      this.total += num;
    },
    childClick: function () {
      alert('childClick');
    }
  }
};
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>
